<template>

<div>
  <el-button type="write" @click="AddProcurement">新增</el-button>
</div>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="80" />
    <el-table-column prop="procurementTopics" label="单据主题" width="100" />
    <el-table-column prop="purchaseNumber" label="单据编号" width="150" />
    <el-table-column prop="purchaseType" label="来源单据类别" width="120" />
    <el-table-column label="采购申请类别" width="120">
      <template #default="scope">
        {{ getPurchaseApplyType(scope.row.purchaseId) }}
      </template>
    </el-table-column>
    <el-table-column label="制单日期" width="120">
      <template #default="scope">
        {{ formatDate(scope.row.time) }}
      </template>
    </el-table-column>
    <el-table-column prop="personnel" label="制单人员" width="120" />
    <el-table-column label="关联项目" width="170">
      <template #default="scope">
        {{ getProjectName(scope.row.projectId) }}
      </template>
    </el-table-column>
    <el-table-column prop="remark" label="备注" width="120" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button link type="danger" :icon="Delete" size="small" @click="Del(scope.row.procurementId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[15, 20, 25, 30]"
    layout="total, sizes, prev, pager, next, jumper" :total="form.totalCount" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { Wread, Wwrite } from "@/axios/axiosHelper"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const router = useRouter();

const form = reactive({
  pageIndex: 1,
  pageSize: 15,
  totalCount: 0,
  totalPage: 0,
})

const tableData = ref([]);
// 假设这是项目 ID 到中文名称的映射表
const projectMap = {
  "1": "汽车零部件销售项目",
  "2": "医疗器械项目",
  "3": "工程机器设备项目",
  "4": "手机生产项目",
  "5": "生活日用品",
  // 可以根据实际情况添加更多映射
};

// 采购申请类别映射表
const purchaseApplyTypeMap = {
  "1": "原材料采购",
  "2": "成品采购",
  "3": "设备采购",
  // 可以根据实际情况添加更多映射
};

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  return new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
}

const getProjectName = (projectId: string) => {
  return projectMap[projectId] || '未知项目';
}

const getPurchaseApplyType = (purchaseId: string) => {
  return purchaseApplyTypeMap[purchaseId] || '未知类别';
}

const Show = () => {
  Wread.get("w2-read/api/Procurement/QueryProcurement", {
    params: {
      pageIndex: form.pageIndex,
      pageSize: form.pageSize
    }
  })
    .then(res => {
      tableData.value = res.data.data;
      form.totalCount = res.data.totalCount;
      form.totalPage = res.data.totalPage;
    })
    .catch(error => {
      ElMessage.error('数据获取失败，请检查网络或联系管理员');
      console.error(error);
    });
}

onMounted(() => {
  Show();
})

const handleSizeChange = (val: number) => {
  form.pageSize = val;
  Show();
}

const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  Show();
}

const Del = (procurementId: any) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      Wwrite.post("w2-write/api/Procurement/DelProcurement", {
        procurementId: procurementId
      })
        .then(res => {
          if (res.data.code == 100) {
            ElMessage.success(res.data.msg);
            Show();
          }
          else {
            ElMessage.error(res.data.msg);
            return;
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

const Upd = (procurementId: any) => {
  router.push({
    path: '/UpdProcurement',
    query: {
      procurementId: procurementId
    }
  })
}

const AddProcurement=()=>{
  router.push({path:'/CreateProcurement'})
}
</script>